<template>
	<view class="anmed">
		<view class="my-top">
			<image class="header" src="https://xcx.xiaombt.com/img/img/header.png" mode=""
				:style="{ height: navbarHeight + 'px' }"></image>
			<view class="nav">
				<u-navbar title="动物药" :autoBack='true' bgColor="transparent" leftIconColor='#6C5D47'
					titleStyle='color:#6C5D47' placeholder>
				</u-navbar>
			</view>

			<view class="select">
				<view class="center">
					<image src="https://xcx.xiaombt.com/img/img/select.png" mode=""></image>
					<u-search placeholder="请输入药材正名\别名" placeholderColor='#D4D3C6' color='#6C5D47' bgColor='transparent'
						searchIconColor='#6C5D47' v-model="keyword" :clearabled='false'></u-search>
				</view>

			</view>
		</view>
		<view class="main" :style="{ marginTop: viewHeight + 'px' }">
			<u-index-list :index-list="indexList">
				<template v-for="(item, index) in itemArr">

					<u-index-item>
						<!-- #ifndef APP-NVUE -->
						<u-index-anchor :text="indexList[index]"></u-index-anchor>
						<!-- #endif -->
						<view class="list-cell" v-for="(cell, index) in item" @click="toWhere(item)">
							{{cell}}
						</view>
					</u-index-item>
				</template>
			</u-index-list>
		</view>

	</view>
</template>

<script>
	import {
		anmedList
	} from '@/api/index.js'
	export default {
		data() {
			return {
				viewHeight: null,
				navbarHeight: null,
				indexList: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L",
					"M", "N", "O", "P", "Q", "R", "S", "T", "U",
					"V", "W", "X", "Y", "Z", "#"
				],
				itemArr: [
					['人参', '鹿茸', '枸杞'],
					['五味子', '鹿茸', '当归'],
					['人参', '鹿茸', '枸杞'],
					['五味子', '鹿茸', '当归'],
					['人参', '鹿茸', '枸杞'],
					['五味子', '鹿茸', '当归'],
					['人参', '鹿茸', '枸杞'],
					['五味子', '鹿茸', '当归'],
					['人参', '鹿茸', '枸杞'],
					['五味子', '鹿茸', '当归'],
					['人参', '鹿茸', '枸杞'],
					['五味子', '鹿茸', '当归'],
					['人参', '鹿茸', '枸杞'],
					['五味子', '鹿茸', '当归'],
					['人参', '鹿茸', '枸杞'],
					['五味子', '鹿茸', '当归'],
					['人参', '鹿茸', '枸杞'],
					['五味子', '鹿茸', '当归'],
					['人参', '鹿茸', '枸杞'],
					['五味子', '鹿茸', '当归'],
					['人参', '鹿茸', '枸杞'],
					['五味子', '鹿茸', '当归'],
					['人参', '鹿茸', '枸杞'],
					['五味子', '鹿茸', '当归'],
					['人参', '鹿茸', '枸杞'],
					['五味子', '鹿茸', '当归'],
					['人参', '鹿茸', '枸杞'],
			

				],
				keyword: '',

			};
		},
		onLoad() {
			const query = uni.createSelectorQuery().in(this);
			query.select('.nav').boundingClientRect(data => {
				if (data) {
					this.navbarHeight = data.height;
				}
			}).exec();
			query.select('.my-top').boundingClientRect(data => {
				if (data) {
					this.viewHeight = data.height;
				}
			}).exec();


		},
		mounted() {
			this.getanmedList()
		},
		methods: {
			getanmedList() {
				anmedList({}).then(res => {

				})
			},
			toWhere(item){
				uni.navigateTo({
					url: '/page/anmedDetail1/index?id='+item.id
				})
			}
		}
	};
</script>


<style lang="scss" scoped>
	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 90%;
		margin: auto;
		overflow: hidden;
		color: #6C5D47;
		font-size: 28rpx;
		border-bottom: 1rpx solid #735E49;
		line-height: 72rpx;
		background-color: #fff;
	}

	/deep/.u-index-item .list-cell:nth-last-child(1) {
		border-bottom: 0rpx solid #735E49;
	}

	/deep/.u-index-anchor {
		background-color: #EDEAE5 !important;
		color: #6C5D47 !important;
		border: none !important;
	}

	/deep/.u-index-list__letter__item {
		color: #6C5D47 !important;

	}

	.my-top {
		width: 100%;
		background-color: #F2EFE9;
		position: fixed;
		z-index: 10000;
		top: 0;
		left: 0;
		// position: relative;

		.header {
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}

		.select {
			padding: 20rpx 38rpx;
			background-color: #fff;

			.center {
				width: 100%;
				height: 76rpx;
				position: relative;
				display: flex;
				align-items: center;
				padding: 20rpx 10rpx;
				box-sizing: border-box;
				justify-content: center;

				image {
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
				}
			}
		}

	}
</style>